<script setup lang="ts">
import {supplierOpts} from "@/utils/status";

import {
  categoryDetail,
  createProductCategory,
  ProductCategoryForm,
  updateProductCategory,
} from "@/api/product/category";
import {productCategoryFields} from "@/utils/field";
import {getSupplierOptions} from "@/api/supplier";

defineOptions({
  name: "CategoryEdit",
  inheritAttrs: false,
});

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },

  categoryId: {
    type: Number,
    default: null,
  },
});
const objFormRef = ref(ElForm);
const loading = ref(false);
const statusOptions = supplierOpts();
const modelFields = productCategoryFields();
const current_role = localStorage.getItem("role_name");

const formData = reactive<ProductCategoryForm>({
  status: 1,
  sort: 60
});

onMounted(() => {
  loading.value = true;

  getSupplierOptions().then(({data}) => {
    loading.value = false;
    modelFields.shop_id.options = data || [];

    /*  if (current_role != 'sys') {
        formData.shop_id = data[0].id;
      }*/
  })

})

watch(
  () => props.categoryId,
  (newVal) => {
    if (newVal) {
      categoryDetail(newVal)
        .then(({data}) => {
          Object.assign(formData, data);
        })
    }
  }
);


interface Rule {
  shop_id: any
  title: any;
  status: any
}

const rules = reactive<Rule>({
  shop_id: [{required: true, message: "请选择所属店铺", trigger: "blur"}],
  title: [{required: true, message: "请输入名称", trigger: "blur"}],
  status: [{required: true, message: "请选择状态", trigger: "blur"}],
});

if (current_role != 'sys') {

  if (rules.shop_id) {
    delete rules.shop_id;
  }
  delete modelFields['shop_id'];
}


/** 保存提交 */
function handleSubmit() {
  objFormRef.value.validate((valid: any) => {
    if (valid) {
      if (loading.value) {
        return;
      }
      const id = formData.id;
      loading.value = true;
      if (id) {
        updateProductCategory(id, formData)
          .then(() => {
            closeDialog(1)
          })
          .finally(() => (loading.value = false));
      } else {
        createProductCategory(formData)
          .then((data) => {
            closeDialog(1)
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

const emit = defineEmits(["close"]);

/** 关闭表单弹窗 */
function closeDialog(type?: any) {
  resetForm();
  emit("close", type || 0);
}

function resetForm() {
  objFormRef.value.resetFields();
  objFormRef.value.clearValidate();

  formData.id = undefined;
  formData.status = 1;
  formData.sort = 60;
}
</script>

<!-- 编辑表单弹窗 -->
<template>
  <el-dialog
    v-model="props.visible"
    :title="categoryId?'编辑分类':'新增分类'"
    width="540px"
    @close="closeDialog"
  >
    <el-form
      ref="objFormRef"
      :model="formData"
      :rules="rules"
      label-width="140px"
    >
      <el-form-item
        :label="field.title"
        :prop="fk.toString()"
        v-for="(field, fk) in modelFields"
        :key="fk"
      >
        <el-radio-group v-model="formData[fk]" v-if="field.type == 'radio'">
          <el-radio
            :label="Number(ok)"
            v-for="(op, ok) in field.options"
            :key="ok"
          >{{ op }}
          </el-radio>
        </el-radio-group>

        <el-select v-model="formData[fk]" v-else-if="field.type == 'select'">
          <el-option
            :label="op.title || ''"
            v-for="op in field.options"
            :value="Number(op.id)"
            v-if="field.range_key"
          />
          <el-option
            :label="op || ''"
            v-for="(op, ok) in field.options"
            :value="Number(ok)"
            v-else
          />
        </el-select>

        <el-input
          :type="field.type || 'text'"
          v-model="formData[fk]"
          :placeholder="'请输入' + field.title"
          v-else
        />
      </el-form-item>

      <div class="clear"></div>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button @click="closeDialog" type="default">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
